// 变量
// 语法：@+变量名: 变量值;

// 全局变量
@color1: #ccc;
@color2: blue;
@num1: 200;
@num2: 200px;
.box1{
    // 局部变量
    @fs: 20px;
    width: 400px;
    height: 100px;
    background-color: @color1;
    font-size: @fs;
}

// 1.less中的字符串插值，使用 @{变量名} 向字符串中插入变量值

// 变量用于选择器和属性名
@str1: box2;
@str2: color;
.@{str1}{
    width: 300px;
    height: 100px;
    @{str2}: blue;
}

// 2.变量用于存储公共路径
@baseurl: './imgs/index/';
.box3{
    width: 400px;
    height: 100px;
    // background-image: url('./imgs/index/01.png');
    background-image: url('@{baseurl}01.png');
}
.box4{
    width: 500px;
    height: 200px;
    // background-image: url('./imgs/index/02.png');
    background-image: url('@{baseurl}02.png');
}
.box5{
    width: 600px;
    height: 300px;
    // background-image: url('./imgs/index/03.png');
    background-image: url('@{baseurl}03.png');
}

// 3.使用变量来引用其他变量
@var: 'hello';
@abc: 'var';
.box6::after{
    // content: 'hello';
    // content: @var;
    content: @@abc;
}

// 4.less中的变量值是延迟加载的，可以在声明之前使用
.box7{
    width: 200px;
    height: 100px;
    margin-left: @num;
}
@num: 40px;
